<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<!-- 1. 引入类型限制js, 在react15版本以前，这个集成在react库当中，之后独立开来 -->
<script src="./prop-types.js"></script>

<script type="text/babel">
// 创建
class Demo extends React.Component {
  // 展示左侧组件内的字符
  showData = ()=>{
    const { input1 } = this
    alert(input1.value)
  }

  showData1 = ()=>{
    const { input2 } = this
    alert(input2.value)
  }

  render(){
    return (
      <div>
        <input 
        type="text" 
        ref={c => this.input1 = c} 
        placeholder="点击按钮提示数据"/>
        <button ref="button100" onClick={this.showData}>点我提示左侧数据</button>
        <input 
        type="text" 
        ref={c => this.input2 = c} 
        placeholder="点击按钮提示数据"
        onBlur={this.showData1}
        />
        </div>
    )
  }
}

ReactDOM.render(<Demo />, document.getElementById('root'))
</script>
</html>
